<!--
author: 何其沆(pooky)
desc: Phase Management - 管理主页面
date: 2021-11-24
-->
<template>
  <div class="phase-management">
    <a-spin :spinning="loading" tip="Loading...">
      <Search @search="handleSearch">
        <div style="display: flex">
          <SearchInput searchText="Branch/BU">
            <a-select
              v-model:value="bb"
              show-search
              option-filter-prop="label"
              option-label-prop="label"
              :get-popup-container="triggerNode => triggerNode.parentNode"
              @change="handleAuthorityChange"
            >
              <a-select-option v-for="item in state.bbList" :key="item.id + '-' + item.type" :label="item.name">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </SearchInput>
          <SearchInput searchText="Name">
            <a-select
              v-model:value="person"
              show-search
              option-filter-prop="label"
              option-label-prop="label"
              :get-popup-container="triggerNode => triggerNode.parentNode"
            >
              <a-select-option v-for="item in state.personList" :key="item.id" :label="item.displayName">
                {{ item.displayName }}
              </a-select-option>
            </a-select>
          </SearchInput>
          <SearchInput searchText="Year">
            <a-select
              v-model:value="year"
              show-search
              option-filter-prop="label"
              option-label-prop="label"
              :get-popup-container="triggerNode => triggerNode.parentNode"
              @change="handleYearChange"
            >
              <a-select-option v-for="item in yearArr" :key="item" :label="item">
                {{ item }}
              </a-select-option>
            </a-select>
          </SearchInput>
          <SearchInput searchText="Quarter/Month">
            <a-select
              v-model:value="qm"
              show-search
              option-filter-prop="label"
              option-label-prop="label"
              :get-popup-container="triggerNode => triggerNode.parentNode"
              @change="handleQmChange"
            >
              <a-select-option label="All" value="0">All</a-select-option>
              <a-select-option label="Q1" value="Q1">Q1</a-select-option>
              <a-select-option label="Q2" value="Q2">Q2</a-select-option>
              <a-select-option label="Q3" value="Q3">Q3</a-select-option>
              <a-select-option label="Q4" value="Q4">Q4</a-select-option>
              <a-select-option label="01" value="1">01</a-select-option>
              <a-select-option label="02" value="2">02</a-select-option>
              <a-select-option label="03" value="3">03</a-select-option>
              <a-select-option label="04" value="4">04</a-select-option>
              <a-select-option label="05" value="5">05</a-select-option>
              <a-select-option label="06" value="6">06</a-select-option>
              <a-select-option label="07" value="7">07</a-select-option>
              <a-select-option label="08" value="8">08</a-select-option>
              <a-select-option label="09" value="9">09</a-select-option>
              <a-select-option label="10" value="10">10</a-select-option>
              <a-select-option label="11" value="11">11</a-select-option>
              <a-select-option label="12" value="12">12</a-select-option>
            </a-select>
          </SearchInput>
        </div>
      </Search>
      <e-container style="margin-top: 24px">
        <statisticsTitle :currentYear="currentYearDes" :description="descriptionDes" />
        <div class="statistics-table">
          <div class="statistics-table-left">
            <div class="top-item">
              <div class="divide-line"></div>
              <div class="performance">Performance</div>
              <div class="tasks">Tasks</div>
            </div>
            <div class="left-item">Touched Clients</div>
            <div class="left-item">Responsive Clients</div>
            <div class="left-item">Positive Clients</div>
            <div class="left-item">Phase 3</div>
            <div class="left-item">Phase 2</div>
            <div class="left-item">Phase 1</div>
            <div class="left-item">Close Clients</div>
          </div>
          <allYearData v-if="qmDes === '0'" />
          <quarterDate v-if="qmDes === 'Q1' || qmDes === 'Q2' || qmDes === 'Q3' || qmDes === 'Q4'" :qm="qmDes" />
          <monthDate
            v-if="
              qmDes === '1' ||
              qmDes === '2' ||
              qmDes === '3' ||
              qmDes === '4' ||
              qmDes === '5' ||
              qmDes === '6' ||
              qmDes === '7' ||
              qmDes === '8' ||
              qmDes === '9' ||
              qmDes === '10' ||
              qmDes === '11' ||
              qmDes === '12'
            "
          />
        </div>
      </e-container>
      <div class="charts-area">
        <funnelChart />
        <pieChart :currentYear="currentYear" />
      </div>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { useStore } from 'vuex'

import EContainer from '@/components/EContainer.vue'
import Search from '../../../components/Search2.vue'
import SearchInput from '../../../components/SearchInput.vue'
import statisticsTitle from './statisticsTitle.vue'
import funnelChart from './funnelChart.vue'
import pieChart from './pieChart.vue'
import allYearData from './allYearData.vue'
import quarterDate from './quarterData.vue'
import monthDate from './monthData.vue'
import phaseManagement from '@/api/phaseManagement'

const store = useStore()
const cYear = new Date().getFullYear()
const bb = ref('')
const person = ref()
const bid = ref()
const type = ref()
const year = ref()
const qm = ref('0')
const qmDes = ref('0')
const currentYear = ref(cYear)
const currentYearDes = ref(cYear)
const description = ref(cYear + ' Annual')
const descriptionDes = ref(cYear + ' Annual')
const state = reactive({
  bbList: [],
  personList: []
})
const loading = ref(false)
const yearArr = ref([])
/**
 * 搜索
 */
const handleSearch = () => {
  loading.value = true
  currentYearDes.value = currentYear.value
  descriptionDes.value = description.value
  qmDes.value = qm.value
  if (qmDes.value === '0') {
    getYearList()
  } else if (qmDes.value.startsWith('Q')) {
    getQuarterList()
  } else {
    getMonthList()
  }
}
/**
 * 修改year
 */
const handleYearChange = val => {
  currentYear.value = val
  changeDes(qm.value)
}
/**
 * 修改Query/Month
 */
const handleQmChange = val => {
  changeDes(val)
}
/**
 * 封装描述
 */
const changeDes = val => {
  switch (val) {
    case '0':
      description.value = currentYear.value + ' Annual'
      break
    case 'Q1':
      description.value = currentYear.value + '-Q1'
      break
    case 'Q2':
      description.value = currentYear.value + '-Q2'
      break
    case 'Q3':
      description.value = currentYear.value + '-Q3'
      break
    case 'Q4':
      description.value = currentYear.value + '-Q4'
      break
    case '1':
      description.value = currentYear.value + '-01'
      break
    case '2':
      description.value = currentYear.value + '-02'
      break
    case '3':
      description.value = currentYear.value + '-03'
      break
    case '4':
      description.value = currentYear.value + '-04'
      break
    case '5':
      description.value = currentYear.value + '-05'
      break
    case '6':
      description.value = currentYear.value + '-06'
      break
    case '7':
      description.value = currentYear.value + '-07'
      break
    case '8':
      description.value = currentYear.value + '-08'
      break
    case '9':
      description.value = currentYear.value + '-09'
      break
    case '10':
      description.value = currentYear.value + '-10'
      break
    case '11':
      description.value = currentYear.value + '-11'
      break
    case '12':
      description.value = currentYear.value + '-12'
      break
  }
}
/**
 * 获取Branch/BU列表
 */
const getBbList = () => {
  phaseManagement
    .getAuthority()
    .then(res => {
      if (res.code === 2000) {
        state.bbList = res.data
        bid.value = state.bbList[0].id
        type.value = state.bbList[0].type
        bb.value = bid.value + '-' + type.value
      }
    })
    .then(() => {
      getPerson()
    })
}
/**
 * 获取Branch/BU下人员列表
 */
const getPerson = () => {
  phaseManagement
    .getAdminEmployeeSales({
      type: type.value,
      BUMID: bid.value
    })
    .then(res => {
      if (res.code === 2000) {
        state.personList = res.data
        person.value = state.personList[0].id
      }
    })
}
/**
 * 通过修改Branch/BU改变人员
 */
const handleAuthorityChange = val => {
  const res = val.split('-')
  bid.value = Number(res[0])
  type.value = Number(res[1])
  getPerson()
}
/**
 * 获取年数据
 */
const getYearList = () => {
  store
    .dispatch('setAdminYearData', {
      empID: person.value,
      bid: bid.value,
      type: type.value,
      year: year.value
    })
    .then(() => {
      store.commit('ADMIN_QUARTER_DATA', [])
      store.commit('ADMIN_MONTH_DATA', [])
    })
    .finally(() => {
      clearLoading()
    })
}
/**
 * 获取季度数据
 */
const getQuarterList = () => {
  const quarter = +qm.value.slice(-1)
  store
    .dispatch('setAdminQuarterData', {
      empID: person.value,
      bid: bid.value,
      type: type.value,
      year: year.value,
      quarter
    })
    .then(() => {
      store.commit('ADMIN_YEAR_DATA', [])
      store.commit('ADMIN_MONTH_DATA', [])
    })
    .finally(() => {
      clearLoading()
    })
}
/**
 * 获取月数据
 */
const getMonthList = () => {
  store
    .dispatch('setAdminMonthData', {
      empID: person.value,
      bid: bid.value,
      type: type.value,
      year: year.value,
      month: Number(qmDes.value)
    })
    .then(() => {
      store.commit('ADMIN_YEAR_DATA', [])
      store.commit('ADMIN_QUARTER_DATA', [])
    })
    .finally(() => {
      clearLoading()
    })
}
/**
 * 关闭loading
 */
const clearLoading = () => {
  setTimeout(() => {
    loading.value = false
  }, 30)
}
/**
 * 初始化
 */
onMounted(() => {
  phaseManagement.getAdminYears().then(res => {
    if (res.code === 2000) {
      yearArr.value = res.data
      year.value = yearArr.value[0]
      getBbList()
    }
  })
  window.addEventListener('resize', () => {
    store.dispatch('setFlag', new Date().getTime())
  })
})
/**
 * 离开清空
 */
onBeforeUnmount(() => {
  store.commit('ADMIN_YEAR_DATA', [])
  store.commit('ADMIN_QUARTER_DATA', [])
  store.commit('ADMIN_MONTH_DATA', [])
})
</script>

<style scoped lang="less">
@import '@/assets/style/reset_form';

.phase-management {
  .search-item {
    margin-right: 24px;
    .search-text {
      color: @text-gray;
      font-size: 14px;
      margin-bottom: 6px;
    }
  }
  .statistics-table {
    margin-top: 24px;
    display: flex;
    overflow-x: auto;
    .statistics-table-left {
      width: 270px;
      min-width: 270px;
      height: 100%;
      border-right: 1px solid @border-color;
      border-left: 1px solid @border-color;
      background-color: @bg-color;
      .top-item {
        width: 100%;
        height: 61px;
        border-top: 1px solid @border-color;
        border-bottom: 1px solid @border-color;
        position: relative;
        color: @text-gray;
        font-size: 14px;
        .divide-line {
          width: 100%;
          height: 1px;
          background-color: @border-color;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%) rotate(12.5deg);
        }
        .performance {
          position: absolute;
          left: 11px;
          bottom: 10px;
        }
        .tasks {
          position: absolute;
          right: 50px;
          top: 10px;
        }
      }
      .left-item {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid @border-color;
        color: @text-gray;
        font-size: 14px;
        padding-left: 11px;
      }
    }
  }
  .charts-area {
    width: 100%;
    height: 470px;
    margin-top: 24px;
    display: flex;
  }
}
.back-area {
  display: flex;
  align-items: center;
  margin-top: -5px;
  .back {
    display: inline-block;
    border: 1px solid @border-color;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 21px;
    cursor: pointer;
  }
  .info {
    display: flex;
    color: @text-gray;
    margin-left: 12px;
    span {
      margin-top: 6px;
      margin-left: 8px;
      font-size: 18px;
      color: @black-85p;
    }
  }
}
</style>
<route lang="yaml">
name: Phase Management
path: /phase-management/
</route>
